<template>
  <div class="qs-card" :style="cardPosition">
    <p class="qs-card-title"><span>
      <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
        <path
          d="M6 1h-5c-0.55 0-1 0.45-1 1v5c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-5c0-0.55-0.45-1-1-1zM6 5h-5v-1h5v1zM14 1h-5c-0.55 0-1 0.45-1 1v13c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-13c0-0.55-0.45-1-1-1zM14 10h-5v-1h5v1zM14 7h-5v-1h5v1zM6 9h-5c-0.55 0-1 0.45-1 1v5c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-5c0-0.55-0.45-1-1-1zM6 13h-2v2h-1v-2h-2v-1h2v-2h1v2h2v1z"
          fill="#ffffff"></path>
      </svg>
      <span id="soil_pingjia_title">Locust Crisis Grade</span></span><span @click="hideBtn" class="qs-card-hidebtn"><svg viewBox="0 0 1045 1024"
                                                                                           version="1.1"
                                                                                           xmlns="http://www.w3.org/2000/svg"
                                                                                           width="16"
                                                                                           height="16"><path
      d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z"
      ></path></svg></span></p>
    <div class="gutter-example">
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            NDVI
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-input size="small" placeholder=""/>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            LAI
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-input size="small" placeholder=""/>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            Moisture
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-input size="small" placeholder=""/>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            LST
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-input size="small" placeholder=""/>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            Date
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-date-picker @change="onChange" style="width: 205px" size="small"/>
        </a-col>
      </a-row>
      <a-button type="primary" size="small" style="width: 100%">
        Calculate
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    cardRight: {
      type: String
    },
    cardWidth: {
      type: String
    },
    cardHeight: {
      type: String
    },
    cardTop: {
      type: String
    },
    cardDisplay: {
      type: String
    }
  },
  data () {
    return {
      display: 'none'
    }
  },
  methods: {
    onChange (date, dateString) {
      console.log(date, dateString)
    },
    hideBtn () {
      this.display = 'none'
    },
    displayBtn () {
      this.display = 'block'
    }
  },
  computed: {
    cardPosition () {
      let styleObj = {
        width: this.cardWidth,
        height: this.cardHeight,
        top: this.cardTop,
        right: this.cardRight,
        display: this.display
      }
      return styleObj
    }
  }
}
</script>

<style>
  .ant-input {
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
  .ant-select-selection{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
  .ant-calendar-picker-input.ant-input.ant-input-sm{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
</style>

<style scoped>
  .ant-input {
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
  .ant-select-selection{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
  .ant-calendar-picker-input.ant-input.ant-input-sm{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }

  .gutter-example {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .gutter-example >>> .ant-row {
    padding-bottom: 5px;
  }

  .gutter-example >>> .ant-row > div {
    background: transparent;
    border: 0;
  }

  .gutter-box {
    background: rgba(0, 160, 233, 0);
    padding: 2px 0;
    height: 24px;
  }

  .qs-card, .modulebox_toggle__2aOEV:hover {
    border: 1px solid #7a7e84;
    background: rgba(33, 36, 37, .62)
  }

  .qs-card {
    position: absolute;
    -webkit-transition: all .18s ease-in;
    transition: all .18s ease-in;
    width: 388px;
    padding: 10px;
    color: #ccc;
    z-index: 999
  }

  .qs-card:after {
    top: -1px;
    bottom: -1px;
    left: 10px;
    right: 10px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333
  }

  .qs-card:after, .qs-card:before {
    content: "";
    position: absolute;
    background: transparent;
    z-index: 0;
    pointer-events: none
  }

  .qs-card:before {
    top: 10px;
    bottom: 10px;
    left: -1px;
    right: -1px;
    border-left: 1px solid #333;
    border-right: 1px solid #333
  }

  .qs-card .qs-card-title {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    background: rgba(100, 191, 255, .3);
    text-align: left;
    color: #fff;
    margin: 0 10px 0 0;
    position: relative;
    padding: 5px 0 5px 10px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    border-left: 5px solid #64bfff;
    vertical-align: middle
  }

  .qs-card .qs-card-title svg {
    vertical-align: middle;
    margin-right: 5px
  }

  .qs-card .qs-card-title:after {
    position: absolute;
    right: -10px;
    bottom: 10px;
    top: 0;
    content: "";
    background: rgba(100, 191, 255, .3);
    width: 10px;
    pointer-events: none
  }

  .qs-card .qs-card-title:before {
    position: absolute;
    right: -10px;
    bottom: 0;
    content: "";
    border-bottom: 5px solid rgba(100, 191, 255, .3);
    border-right: 5px solid rgba(100, 191, 255, .3);
    border-color: rgba(100, 191, 255, .3) transparent transparent rgba(100, 191, 255, .3);
    border-style: solid;
    border-width: 5px;
    width: 0;
    height: 0;
    pointer-events: none
  }

  .qs-card .qs-card-title .qs-card-hidebtn {
    float: right;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer
  }

  .qs-card .qs-card-title .qs-card-hidebtn svg {
    fill: #999;
    -webkit-transition: all .18s ease-in;
    transition: all .18s ease-in
  }

  .qs-card .qs-card-title .qs-card-hidebtn:hover svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    fill: #fff
  }

  .qs-card .modulebox_list__3v4ZC {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 0
  }

  .qs-card .modulebox_list__3v4ZC .modulebox_listTable__1tHf3 {
    overflow: auto;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0
  }
</style>
